<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* css reset 开始 */
			html,body{height: 100%;overflow: hidden;}
			html,body,h1,h2,h3,h4,h5,h6,p,ul,li{margin: 0px;padding: 0px;font: 14px "微软雅黑";}
			a{text-decoration: none;display: block;}
			li{list-style: none;}
			img{display: block;}
			/* css reset 结束 */
			
			/* 公共样式 开始 */
			.clearfix{*zoom: 1;}
			.clearfix:after{content: "";display: block;clear: both;}
			/* 公共样式 结束 */
			
			/* 头部样式 开始 */
			#head{background: white !important;}
			#head .headMain{width: 1100px;height: 80px;margin: 0 auto;position: relative;}
			#head .headMain > .logo{float: left;margin-top: 30px;}
			#head .headMain > .nav{float: right;margin-top: 50px;}
			#head .headMain > .nav > .list > li {float: left; margin-left: 40px;position: relative;}
			#head .headMain > .nav > .list > li > a > .up {color: black;position: absolute;width: 0;overflow: hidden;transition: 1s width;}
			#head .headMain > .nav > .list > li:hover .up {width: 100%;}
			#head .headMain > .arrow{width: 21px;height: 11px;background: url(img/menuIndicator.png);position: absolute;left: 50%;bottom: -11px;transition: .5s left;}
			/* 头部样式 结束 */
			
			/* 内容区域 开始 */
			#content{height: 300px;background: gray;}
			/* 内容区域 结束 */
		</style>
	</head>
	<body>
		<!-- section用来充当视口的 -->
		<section id="wrap">
			<!-- 流体布局 -->
			<header id="head">
				<!-- 固定布局 -->
				<div class="headMain">
					<!-- logo -->
					<h1 class="logo">
						<a href="javascript:;">
							<img src="img/logo.png" >
						</a>
					</h1>
					<nav class="nav">
						<ul class="list clearfix">
							<li>
								<a href="javascript:;">
									<div class="up"><img src="img/home_gruen.png" ></div>
									<div class="down"><img src="img/home.png" ></div>
								</a>
							</li>
							<li>
								<a href="javascript:;">
									<div class="up">Course</div>
									<div class="down">Course</div>
								</a>
							</li>
							<li>
								<a href="javascript:;">
									<div class="up">Works</div>
									<div class="down">Works</div>
								</a>
							</li>
							<li>
								<a href="javascript:;">
									<div class="up">About</div>
									<div class="down">About</div>
								</a>
							</li>
							<li>
								<a href="javascript:;">
									<div class="up">Team</div>
									<div class="down">Team</div>
								</a>
							</li>
						</ul>
					</nav>
								
					<div class="arrow"></div>
				</div>
				
				
			</header>
			<section id="content"></section>
		</section>
	</body>
	<script type="text/javascript">
		window.onload=function(){
			// 修改导航栏中的arrow的位置
			// 获取箭头的dom元素
			var arrowEl = document.querySelector("#head .headMain > .arrow");
			var liNodes = document.querySelectorAll("#head .headMain > .nav > .list > li");
			var liUpNodes = document.querySelectorAll("#head .headMain > .nav > .list > li > a > .up");
			var firstLiNode = liNodes[0];
			var firstLiUpNode = firstLiNode.querySelector(".up");
			
			// console.log(firstLiNode.offsetWidth);
			// console.log(firstLiNode.offsetLeft);
			
			// 登录网站，默认选中当前项。移动arrow的位置
			arrowEl.style.left = firstLiNode.offsetLeft + firstLiNode.offsetWidth/2 - arrowEl.offsetWidth/2 + "px";
			// 默认选中了第一个li,那么需要动画.这里注意要加双引号
			firstLiUpNode.style.width = "100%";
			
			for (var i = 0; i < liNodes.length; i++) {
				liNodes[i].index = i;
				liNodes[i].onclick=function(){
					// liUpNodes[i] 注意,这里这样写是获取不到upnodes的,比如我要点第一个li下的up,但是i因为for循环已经到最后一个了.
					var up = liUpNodes[this.index]
					
					// 其他导航节点恢复原样
					for (var i = 0; i < liUpNodes.length; i++) {
						// 为什么教程这里这样写: liUpNodes[i].style.width=""; 而不是 liUpNodes[i].style.width="0";
						// 因为这样写,hover中style的样式权重比默认的要高,并且为0.那么会影响后面的动画.
						liUpNodes[i].style.width="";
					}
					
					// 让当前导航节点显示动画,当前代码必须放在上面的代码的下面.
					arrowEl.style.left = this.offsetLeft + this.offsetWidth/2 - arrowEl.offsetWidth/2 + "px";
					up.style.width = "100%";
				}
			}
		}
	</script>
</html>
